<template>
  <div class="dll_body">
    <div class="dll_guan">
      <van-icon name="arrow-left" style="margin-top: 5px; margin-left:10px ;" @click="onClickLeft" />
      <span style="margin-left: 130px;"> 关于我们</span>
    </div>
    <div class="dll_logo">
      <van-image round width="2.5rem" height="2.5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    </div>
    <div style="text-align: center;margin-top: 10px;">
      <span style="font-size: 18px;">默默校园跑</span><br>
      <span style="font-size: 12px;"> 版本号：1.0.0</span>
    </div>
    <div style="margin-top: 50px;">
      <van-cell title="给我们评分" size="large" is-link  style="padding-left: 15px;" />
      <van-cell  title="分享给好友" is-link  size="large"  @click="showShare = true"  style="padding-left: 15px;"/>
      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options"   @select="onSelect"/>
      <van-popup v-model:show="showQrCodePopup">
        <QRCode value="https://blog.csdn.net/"/>
        <!-- <QRCode value="http://127.0.0.1:5173"/> -->
    </van-popup>
      <van-cell title="版本更新" size="large" is-link to="guanyu" value="已是最新版本" style="padding-left: 15px;" />
    </div>

    <div style="margin-top: 140px;text-align: center;color: gray;">
      <span style="font-size: 12px;">@2023 默默校园跑 版权所有</span><br>
      <span style="font-size: 12px;"> XXXX有限公司</span>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import QRCode from './qrcode.vue'
import { showToast } from 'vant';
const showQrCodePopup = ref(false);

const onClickLeft = () => history.back();
// 分享面板
const showShare = ref(false);
const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
        { name: '复制链接', icon: 'link' },
        { name: '二维码', icon: 'qrcode' ,callback: () => {
          showQrCodePopup.value = true;
          },},
      ],
    ];
    const onSelect = (option) => {
      // showToast(option.name);
      showQrCodePopup.value = true;
    };
</script>

<style lang="scss" scoped>
.dll_body {
  width: 100%;
  height: 100vh;
  background-color: #F7F7F7;

  .dll_guan {
    width: 100%;
    display: flex;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white
  }

  .dll_logo {
    margin: 0 auto;
    margin-top: 70px;
    display: flex;
    justify-content: center;
    // background-color: red;
  }
}
</style>


<!-- <template>
  <div>
    <button @click="shareApp">分享应用</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const shareApp = async () => {
  try {
    const shareData = {
      title: '我的Vue应用',
      text: '这是一个非常好的Vue应用，快来看看吧！',
      url: 'http://127.0.0.1:5173/guanyu',
    };
    
    // 检查浏览器是否支持Web Share API
    if (navigator.share) {
      await navigator.share(shareData);
    } else {
      // 如果不支持Web Share API，可以使用社会化分享库
      // 例如：使用 Facebook SDK 或者通过 window.open 打开分享面板
      window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareData.url)}&quote=${encodeURIComponent(shareData.text)}`, '_blank');
    }
  } catch (error) {
    console.error('分享失败：', error);
  }
};
</script>
 -->

